<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>v-MDelay 按钮节流指令 | marathon</title>
    <meta name="generator" content="VuePress 1.8.2">  <meta name="description" content="马拉松项目，一个很牛逼的前端项目。承载着重百乃至更多的项目的基础框架建设，是公司前端规划的基石。马拉松表面的42.195公里，背后是无数个马拉松的努力，望以此与诸君共勉。">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.0fd2c289.css" as="style"><link rel="preload" href="/assets/js/app.bca092fe.js" as="script"><link rel="preload" href="/assets/js/2.bcfbeac3.js" as="script"><link rel="preload" href="/assets/js/6.68edde6e.js" as="script"><link rel="preload" href="/assets/js/5.74bd5f86.js" as="script"><link rel="prefetch" href="/assets/js/3.1c9abd66.js"><link rel="prefetch" href="/assets/js/4.59c3b4a1.js"><link rel="prefetch" href="/assets/js/7.d92464eb.js"><link rel="prefetch" href="/assets/js/8.346cd128.js"><link rel="prefetch" href="/assets/js/9.4812d203.js"> <link rel="stylesheet" href="/assets/css/0.styles.0fd2c289.css">
</head>

<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><div><header><div class="note-row layout-header"><div class="note-col note-navbar-left"><button type="button" class="sidebar-button"><span class="sidebar-button-content"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></span></button> <a href="/" class="home-link router-link-active"><span class="site-name">marathon</span></a></div> <div class="note-col note-navbar-right"><div class="search" style="width:30%;"><div class="searchbox"><div class="searchbox-icon"><svg t="1587518432004" color="rgba(0,0,0,.6)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1873" class="icon"><path d="M946.155051 895.382691l-186.037067-186.032974c56.195883-67.547419 89.998757-154.376996 89.998757-249.113661 0-215.247342-174.49315-389.741515-389.746632-389.741515-215.247342 0-389.741515 174.49315-389.741515 389.741515 0 215.252459 174.49315 389.746632 389.741515 389.746632 95.768157 0 183.461405-34.540677 251.317862-91.841731l185.853895 185.853895c6.710842 6.714935 15.505136 10.067286 24.304546 10.067286 8.794293 0 17.593703-3.357468 24.307615-10.067286C959.576735 930.575214 959.576735 908.808468 946.155051 895.382691L946.155051 895.382691zM460.370109 781.233907c-43.363623 0-85.392856-8.476045-124.920104-25.195845-38.217417-16.166191-72.554456-39.321564-102.054327-68.821435-29.504988-29.504988-52.655244-63.836911-68.821435-102.054327-16.720823-39.529295-25.195845-81.561597-25.195845-124.925221 0-43.363623 8.476045-85.392856 25.195845-124.925221 16.166191-38.2123 39.316447-72.550363 68.821435-102.050234 29.499871-29.504988 63.836911-52.66036 102.054327-68.821435 39.528272-16.7198 81.556481-25.195845 124.920104-25.195845s85.395926 8.476045 124.925221 25.195845c38.217417 16.161075 72.554456 39.316447 102.054327 68.821435 29.499871 29.499871 52.655244 63.831794 68.820412 102.050234 16.721847 39.529295 25.196869 81.561597 25.196869 124.925221 0 43.363623-8.476045 85.395926-25.196869 124.925221-16.164145 38.217417-39.315424 72.550363-68.820412 102.054327-29.499871 29.499871-63.836911 52.655244-102.054327 68.821435C545.767058 772.758885 503.734756 781.233907 460.370109 781.233907L460.370109 781.233907zM460.370109 781.233907" p-id="1874"></path></svg></div> <div class="searchbox-content"><input type="text" name="search" autocomplete="off" aria-label="Search" value=""></div> <!----></div></div> <div class="navlinks can-hide"><!----></div></div></div></header> <main><div class="note-sidebar animated fadeInLeft faster"> <ul class="note-sidebar-links"><li><a href="/component/m-table.html" class="sidebar-link">M-Table 增强实现</a></li><li><a href="/directvie/m-delay.html" aria-current="page" class="active sidebar-link">v-MDelay 按钮节流指令</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/extend/setData.html" class="sidebar-link">$setData 扩展函数</a></li></ul> </div> <div class="note-page" style="padding-left:252px;"> <div class="theme-note-content content__default"><p>为什么要这么做 ？</p> <blockquote><p>系统某页面中有一个<code>导出Excel</code>的按钮，全量导出时需要点时间，可能10秒或者更长，为了防止用户重复点击导出按钮，
我们设计了一个点击后按钮出现倒计时的功能，给予用户即时反馈，以免用户怀疑系统假死。同时也可以防止用户暴力重复点击，而带来的
不必要的性能损耗，也避免用户同时收到N(&gt;=1)个文件下载的不友好体验。这波指定时间范围内防止用户暴力/非暴力重复点击，既能提高用户体验，
又能提升系统性能的操作被称之为
--节流。</p> <p>这个设计需要一个定时器，在定时器开始时设定按钮不可点击，计时结束按钮恢复生产。功能简单，思路清晰，
但是作者手写一个至少需要大约1分钟的时间。考虑到实现此功能超过一分钟的同学，我们制作了这个指令。使用这个指令，1分钟大约、应该、可以完
成3个（及以上）相同的功能。</p></blockquote> <h3 id="案例"><a href="#案例" class="header-anchor">#</a> 案例</h3> <blockquote><p>功能特点：简单、高效、实用，还能互不影响。我们采用高密度计算方案，倒计时精准有效。<br>
使用须知：请注意设置按钮宽度，为倒计时保留足够空间。<br>
注：由于此指令使用过于简单，遂不作参数介绍，请参考下方代码。</p></blockquote> <h5 id=""><a href="#" class="header-anchor">#</a></h5> <div class="demo-block demo-directvie demo-m-delay.html"><div class="source"><div><button type="button" class="el-button el-button--default"><!----><!----><span>暴力可点</span></button> <button type="button" class="el-button el-button--default"><!----><!----><span>我3秒</span></button> <button type="button" class="el-button el-button--default"><!----><!----><span>我5秒</span></button> <button type="button" class="el-button el-button--default"><!----><!----><span>我10秒</span></button> <button type="button" class="el-button el-button--default"><!----><!----><span>我30</span></button></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span><span class="token punctuation">&gt;</span></span>暴力可点<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-MDelay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我3秒<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-MDelay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我5秒<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-MDelay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我10秒<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-MDelay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我30<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div></div> <!----> <!----> </div></main></div></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.bca092fe.js" defer></script><script src="/assets/js/2.bcfbeac3.js" defer></script><script src="/assets/js/6.68edde6e.js" defer></script><script src="/assets/js/5.74bd5f86.js" defer></script>
</body>

</html>